import React from 'react';
import { TjForm } from '@/tjComponents';
import { Button, Cascader, Input, Select } from 'antd';
import './index.less';
import { useThrottleFn } from 'ahooks';
import { useForm } from 'antd/es/form/Form';
import type { ProvinceType } from '@/hooks/useRequestPowerAfterInit';
import { isMatched } from '../../helper';
import _ from 'lodash';

const DrawerContent: React.FC<IDrawerContentProps> = (props) => {
  const { run } = useThrottleFn(() => submit(), { wait: 1000 });
  const [form] = useForm();

  const submit = () => {
    form.validateFields().then((values) => {
      const newValues = { ...values };
      if (values.stationTypeId) {
        const item = props.stationTypes.find((v) => v.value === values.stationTypeId);
        newValues.stationTypeName = item.label;
      }
      if (values.stationLocation && values.stationLocation.length > 0) {
        const province = _.find(
          props.stationLocations,
          (n: any) => n.value === values.stationLocation[0],
        );
        if (province) {
          const city = _.find(province.children, (c: any) => c.value === values.stationLocation[1]);
          newValues.provinceId = province.value;
          newValues.provinceName = province.label;
          newValues.cityId = city.value;
          newValues.cityName = city.label;
        }
      }
      props.onSubmit && props.onSubmit(newValues);
    });
  };

  return (
    <div className="station-info-drawer-content">
      <div className="title">基本信息</div>
      <div className="form-box">
        <TjForm
          form={form}
          initialValues={props.defaultValue}
          useGrid={{
            row: {
              gutter: 40,
            },
            col: {
              span: 8,
            },
          }}
          layout="vertical"
          items={[
            {
              name: 'stationId',
              label: '交易单元编码',
              rules: [
                { required: true, message: '请输入交易单元编码' },
                { pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入整数' },
              ],
              render: <Input disabled={props.defaultValue} />,
            },
            {
              name: 'stationName',
              label: '交易单元',
              rules: [
                { required: true, message: '请输入交易单元' },
                { max: 50, message: '输入内容不能超过 50 个字符' },
              ],
            },
            {
              name: 'schedulingName',
              label: '调度名称',
              rules: [{ max: 20, message: '输入内容不能超过 20 个字符' }],
            },
            {
              name: 'stationCapacity',
              label: '装机容量（MW）',
              rules: [
                { required: true, message: '请输入装机容量' },
                {
                  pattern: /^(?:[1-4]?\d{1,2}(?:\.\d{1,2})?|500(?:\.0{1,2})?|0\.\d{1,2}|0)$/,
                  message: '只能输入数字范围0-500（保留小数点后2位）',
                },
              ],
            },
            {
              name: 'stationType',
              label: '发电类型',
              rules: [{ required: true, message: '请选择发电类型' }],
              render: <Select options={props.stationTypes} />,
            },
            {
              name: 'groupId',
              label: '发电集团',
              rules: [{ required: true, message: '请选择发电集团' }],
              render: (
                <Select
                  options={props.groupList}
                  showSearch
                  filterOption={(input, option) =>
                    typeof option?.label === 'string' &&
                    option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              ),
            },
            {
              name: 'forecastSystemProvider',
              label: '功率预测系统供应商',
              rules: [{ max: 10, message: '输入内容不能超过 10 个字符' }],
            },
            {
              name: 'managerName',
              label: '场站联系人姓名',
              rules: [{ max: 4, message: '输入内容不能超过 4 个字符' }],
            },
            {
              name: 'managerMobile',
              label: '场站联系人电话',
              rules: [
                {
                  pattern: /^1[3-9]\d{9}$|^0\d{2,3}-\d{7,8}$/,
                  message: '请输入正确的联系人电话',
                },
              ],
            },
            {
              name: 'isMatched',
              label: '是否大基地项目',
              rules: [{ required: true, message: '请选择是否大基地项目' }],
              render: <Select options={isMatched} />,
            },
            {
              name: 'registerName',
              label: '登记名称（电力业务许可证）',
              rules: [{ max: 10, message: '输入内容不能超过 10 个字符' }],
            },
            {
              name: 'benchmarkPrice',
              label: '基数电价（元/MWh）',
              rules: [
                {
                  pattern: /^(?:[1-9]\d{0,2}(?:\.\d{1,2})?|0\.\d{1,2}|1000(?:\.0{1,2})?|0)$/,
                  message: '只能输入数字范围0-1000（保留小数点后2位）',
                },
              ],
            },
            {
              name: 'subsidyPrice',
              label: '补贴电价（元/MWh）',
              rules: [
                { required: true, message: '请输入补贴电价' },
                {
                  pattern: /^(?:[1-9]\d{0,2}(?:\.\d{1,2})?|0\.\d{1,2}|1000(?:\.0{1,2})?|0)$/,
                  message: '只能输入数字范围0-1000（保留小数点后2位）',
                },
              ],
            },
            {
              name: 'settlementCycleType',
              label: '结算周期',
              rules: [{ required: true, message: '请输入结算周期' }],
            },
            {
              name: 'marketId',
              label: '交易中心',
              render: <Select options={props.province} placeholder={'请选择'} />,
              rules: [{ required: true, message: '请选择交易中心' }],
            },
            {
              name: 'stationLocation',
              label: '场站位置',
              render: <Cascader options={props.stationLocations} placeholder={'请选择'} />,
              rules: [{ required: true, message: '请选择场站位置' }],
            },
            {
              name: 'longitude',
              label: '升压站经度',
              rules: [
                {
                  pattern:
                    /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,4})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,4}|180)$/,
                  message: '经度范围：-180~180（保留小数点后4位）',
                },
              ],
            },
            {
              name: 'latitude',
              label: '升压站纬度',
              rules: [
                {
                  pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,4}|90\.0{0,4}|[0-8]?\d{1}|90)$/,
                  message: '纬度范围：-90~90（保留小数点后4位）',
                },
              ],
            },
            {
              name: 'superiorStationName',
              label: '上级站节点名称',
              rules: [{ max: 5, message: '输入内容不能超过 5 个字符' }],
            },
            {
              name: 'remark',
              label: '备注',
              col: {
                span: 24,
              },
              rules: [{ max: 50, message: '输入内容不能超过 50 个字符' }],
            },
          ]}
        />
      </div>
      <div className="btn">
        <Button
          style={{ width: 98, height: 32 }}
          type="primary"
          onClick={run}
          loading={props.loading}
        >
          提交
        </Button>
      </div>
    </div>
  );
};

interface IDrawerContentProps {
  loading?: boolean;
  onSubmit?: (valuse: any) => void;
  stationTypes: any[];
  province: ProvinceType[];
  stationLocations: any[];
  defaultValue?: any;
  groupList: any[];
}

export default DrawerContent;
